import React, { lazy } from "react";

// import ErrorPage from "@pages/ErrorPage/error-page.jsx";
// import DefaultLayoutPage from "@/layout/index.jsx";

// import FullPageScroll from "@pages/FullPageScroll";
import Tsparticles from "@pages/Tsparticles";
import OnReactEvent from "@pages/onEvent";
import Contact from "@pages/contact";
import EditContact from "@pages/contact/edit";

const ErrorPage = lazy(() => import('@pages/ErrorPage/error-page.jsx'))
const DefaultLayoutPage = lazy(() => import('@/layout/index.jsx'))
const FullPageScroll = lazy(() => import('@pages/FullPageScroll'))

// TODO: 代码分割，import（）懒加载处理
function rootLoader({ request }) {
  console.log("request", request);
  const url = new URL(request.url);
  console.log("url", url);
  const q = url.searchParams.get("q");
  return { q };
}
const router = [
  {
    path: "/",
    element: <DefaultLayoutPage />,
    errorElement: <ErrorPage />,
    children: [
      {
        // index:true,
        path: "contact/:contactId",
        element: <Contact />,
        children: [
        ],
      },
      {
        path: "contact/:contactId/edit",
        element: <EditContact />,
        loader: rootLoader, //  const { contacts } = useLoaderData();
      },
      // {
      //   errorElement: <ErrorPage />,
      //   children: [
      //     { index: true,  },
        
      //   ],
      // },
      {
        path: "about",
        element: <FullPageScroll />,
      },
      {
        path: "event",
        element: <OnReactEvent />,
      },
    ],
  },
  
  {
    path: "/tsparticles",
    element: <Tsparticles />,
  },
  
];

export default router;
